<template>
  <div>
  <!-- 卡片视图区 -->
  <el-card>
    <el-row :gutter='25'>
      <el-col :span='7'>
        <!-- 搜索添加 -->
        <el-input
          placeholder='请输入搜索成员的名字'
          v-model.lazy='queryInfo.searchName'
          @change='getVisualList'
        >
        </el-input>
       </el-col>
      <el-col :span='4'>
      <el-button type='primary'
          >搜索</el-button
        >
        <el-button type='primary' @click='dialogAddVisible = true'
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table
      :data='VisualList'
      border
      stripe
      v-loading='isLoading'
      element-loading-background='rgba(255, 255, 255, .5)'
      element-loading-text='加载中，请稍后...'
      element-loading-spinner='el-icon-loading'
    >
      <el-table-column label='序号' type='index' fixed='left'></el-table-column>
      <el-table-column label='成员ID' prop='Id'></el-table-column>
      <el-table-column label='伴侣ID' prop='Pids'></el-table-column>
      <el-table-column label='母亲ID' prop='Mid'></el-table-column>
      <el-table-column label='父亲ID' prop='Fid'></el-table-column>
      <el-table-column label='姓名' prop='Name'></el-table-column>
      <el-table-column label='性别' prop='Gender'></el-table-column>
      <el-table-column label='生日' prop='Birth'></el-table-column>
      <el-table-column label='家族' prop='Familytree'></el-table-column>
      <el-table-column label='头像' prop='Img'></el-table-column>
      <el-table-column label='电话' prop='Tel'></el-table-column>
      <el-table-column label='邮箱' prop='Email'></el-table-column>
      <el-table-column label='履历' prop='Resume'></el-table-column>
      <el-table-column label='更新时间' prop='UpdateTime'></el-table-column>
      <el-table-column label='操作' fixed='right'>
        <template #default='scope'>
          <!-- 修改 -->
          <el-button
            type='primary'
            icon='el-icon-edit'
            size='mini'
            @click='
              dialogEditOpen(
                scope.row.Id,
                scope.row.Pids,
                scope.row.Mid,
                scope.row.Fid,
                scope.row.Name,
                scope.row.Gender,
                scope.row.Birth,
                scope.row.Familytree,
                scope.row.Img,
                scope.row.Tel,
                scope.row.Email,
                scope.row.Resume,
              )
            '
          >
          </el-button>
          <!-- 删除 -->
          <el-button
            type='danger'
            icon='el-icon-delete'
            size='mini'
            @click='deleteVisual(scope.row.Id)'
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='queryInfo.page'
      :page-sizes='[1, 2, 10, 100]'
      :page-size='queryInfo.limit'
      layout='total, sizes, prev, pager, next, jumper'
      :total='total'
    ></el-pagination>
  </el-card>
  <el-dialog title='添加成员' v-model='dialogAddVisible' width='50%'>
    <el-form
      :model='addForm'
      :rules='addFormRules'
      ref='addFormRef'
      label-width='100px'
    >
      <el-form-item label='成员ID' prop='Id'>
        <el-input v-model='addForm.Id' @blur='test()'></el-input>
      </el-form-item>
      <el-form-item label='伴侣ID' prop='Pids'>
        <el-input v-model='addForm.Pids'></el-input>
      </el-form-item>
      <el-form-item label='母亲ID' prop='Mid'>
        <el-input v-model='addForm.Mid'></el-input>
      </el-form-item>
      <el-form-item label='父亲ID' prop='Fid'>
        <el-input v-model='addForm.Fid'></el-input>
      </el-form-item>
      <el-form-item label='姓名' prop='Name'>
        <el-input v-model='addForm.Name'></el-input>
      </el-form-item>
      <el-form-item label='性别' prop='Gender'>
        <el-input v-model='addForm.Gender'></el-input>
      </el-form-item>
       <el-form-item label='生日' prop='Birth'>
        <el-input v-model='addForm.Birth'></el-input>
      </el-form-item>
      <el-form-item label='家族' prop='Familytree'>
        <el-input v-model='addForm.Familytree'></el-input>
      </el-form-item>
      <el-form-item label='头像' prop='Img'>
        <el-input v-model='addForm.Img'></el-input>
      </el-form-item>
      <el-form-item label='电话' prop='Tel'>
        <el-input v-model='addForm.Tel'></el-input>
      </el-form-item>
      <el-form-item label='邮箱' prop='Email'>
        <el-input v-model='addForm.Email'></el-input>
      </el-form-item>
      <el-form-item label='履历' prop='Resume'>
        <el-input v-model='addForm.Resume'></el-input>
      </el-form-item>
      <el-form-item label='更新时间' prop='UpdateTime'>
        <el-input v-model='addForm.UpdateTime'></el-input>
      </el-form-item>
    </el-form>
    <el-button type='primary' @click='addVisual()'>确 定</el-button>
    <el-button @click='dialogAddVisible = false'>取 消</el-button>
  </el-dialog>
  <!-- 编辑对话框 -->
  <el-dialog title='编辑成员' v-model='dialogEditVisible' width='50%'>
    <el-form
      :model='editForm'
      :rules='editFormRules'
      ref='editFormRef'
      label-width='100px'
    >
      <el-form-item label='成员ID' prop='Id'>
        <el-input v-model='editForm.Id'></el-input>
      </el-form-item>
      <el-form-item label='伴侣ID' prop='Pids'>
        <el-input v-model='editForm.Pids'></el-input>
      </el-form-item>
      <el-form-item label='母亲ID' prop='Mid'>
        <el-input v-model='editForm.Mid'></el-input>
      </el-form-item>
      <el-form-item label='父亲ID' prop='Fid'>
        <el-input v-model='editForm.Fid'></el-input>
      </el-form-item>
       <el-form-item label='姓名' prop='Name'>
        <el-input v-model='editForm.Name'></el-input>
      </el-form-item>
      <el-form-item label='性别' prop='Gender'>
        <el-input v-model='editForm.Gender'></el-input>
      </el-form-item>
      <el-form-item label='生日' prop='Birth'>
        <el-input v-model='editForm.Birth'></el-input>
      </el-form-item>
      <el-form-item label='家族' prop='Familytree'>
        <el-input v-model='editForm.Familytree'></el-input>
      </el-form-item>
      <el-form-item label='头像' prop='Img'>
        <el-input v-model='editForm.Img'></el-input>
      </el-form-item>
      <el-form-item label='电话' prop='Tel'>
        <el-input v-model='editForm.Tel'></el-input>
      </el-form-item>
      <el-form-item label='邮箱' prop='Email'>
        <el-input v-model='editForm.Email'></el-input>
      </el-form-item>
      <el-form-item label='履历' prop='Resume'>
        <el-input v-model='editForm.Resume'></el-input>
      </el-form-item>
    </el-form>
    <el-button type='primary' @click='updateVisual'>确 定</el-button>
    <el-button @click='dialogEditVisible = false'>取 消</el-button>
  </el-dialog>
</div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: false,
      dialogAddVisible: false,
      dialogEditVisible: false,
      queryInfo: {
        searchName: '',
        page: 1,
        limit: 10
      },
      VisualList: [], // 成员列表
      total: 0, // 最大数据记录
      addForm: {
        Id: '',
        Pids: '',
        Mid: '',
        Fid: '',
        Name: '',
        Gender: '',
        Birth: '',
        Familytree: '',
        Img: '',
        Tel: '',
        Email: '',
        Resume: '',
        UpdateTime: ''
      },
      editForm: {
        Id: '',
        Pids: '',
        Mid: '',
        Fid: '',
        Name: '',
        Gender: '',
        Birth: '',
        Familytree: '',
        Img: '',
        Tel: '',
        Email: '',
        Resume: '',
        UpdateTime: ''
      },
      addFormRules: {
        Id: [
          {
            required: true,
            message: '请输入成员ID',
            trigger: 'blur'
          }
        ],
        Pids: [
          {
            required: true,
            message: '请输入伴侣ID',
            trigger: 'blur'
          }
        ],
        Mid: [
          {
            required: true,
            message: '请输入母亲ID',
            trigger: 'blur'
          }
        ],
        Fid: [
          {
            required: true,
            message: '请输入父亲ID',
            trigger: 'blur'
          }
        ],
        Name: [
          {
            required: true,
            message: '请输入姓名姓名',
            trigger: 'blur'
          }
        ],
        Gender: [
          {
            required: true,
            message: '请输入母亲姓名',
            trigger: 'blur'
          }
        ],
        Birth: [
          {
            required: true,
            message: '请输入成员生日',
            trigger: 'blur'
          }
        ],
        Familytree: [
          {
            required: true,
            message: '请输入成员家族',
            trigger: 'blur'
          }
        ],
        Img: [
          {
            required: true,
            message: '请输入头像',
            trigger: 'blur'
          }
        ],
        Tel: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }
        ],
        Email: [
          {
            required: true,
            message: '请输入成员邮箱',
            trigger: 'blur'
          }
        ],
        Resume: [
          {
            required: true,
            message: '请输入成员履历',
            trigger: 'blur'
          }
        ]
      },
      editFormRules: {
        Id: [
          {
            required: false,
            message: '请输入成员ID',
            trigger: 'blur'
          }
        ],
        Pids: [
          {
            required: false,
            message: '请输入伴侣ID',
            trigger: 'blur'
          }
        ],
        Mid: [
          {
            required: false,
            message: '请输入母亲ID',
            trigger: 'blur'
          }
        ],
        Fid: [
          {
            required: false,
            message: '请输入父亲ID',
            trigger: 'blur'
          }
        ],
        Name: [
          {
            required: false,
            message: '请输入姓名',
            trigger: 'blur'
          }
        ],
        Gender: [
          {
            required: false,
            message: '请输入性别',
            trigger: 'blur'
          }
        ],
        Birth: [
          {
            required: false,
            message: '请输入成员生日',
            trigger: 'blur'
          }
        ],
        Familytree: [
          {
            required: false,
            message: '请输入成员家族',
            trigger: 'blur'
          }
        ],
        Img: [
          {
            required: false,
            message: '请输入头像',
            trigger: 'blur'
          }
        ],
        Tel: [
          {
            required: false,
            message: '请输入电话',
            trigger: 'blur'
          }
        ],
        Email: [
          {
            required: false,
            message: '请输入成员邮箱',
            trigger: 'blur'
          }
        ],
        Resume: [
          {
            required: true,
            message: '请输入成员履历',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getVisualList()
  },
  methods: {
    async getVisualList() {
      this.isLoading = true
      // 调用post请求
      console.log(this.VisualList)
      const { data: res } = await this.$http.get('system/apis/visualization', {
        params: this.queryInfo
      })
      if (res.code !== 20000) {
        this.$message.error('加载用户列表失败')
        this.isLoading = false
      }
      this.VisualList = res.data.value // 将返回数据赋值
      this.total = res.data.total // 总个数
      this.isLoading = false
    },
    // 监听pageSize改变的事件
    handleSizeChange(newLimit) {
      this.queryInfo.limit = newLimit
      this.getVisualList() // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getVisualList() // 数据发生改变重新申请数据
    },
    test() {
      console.log(this.addForm.Id)
    },
    async deleteVisual(Id) {
      // 弹框
      const confirmResult = await this.$confirm(
        '此操作将永久删除该成员, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 成功删除为confirm 取消为 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete(
        'system/apis/visualization?id=' + Id
      )
      if (res.code !== 20000) {
        return this.$message.error('删除失败')
      }
      this.$message.success('删除成功')
      this.getVisualList()
    },
    // 添加成员
    addVisual() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        // 发起请求
        const { data: res } = await this.$http.post(
          '/system/apis/visualization',
          this.addForm
        )
        if (res.code === 20000) {
          this.getVisualList()
          this.dialogAddVisible = false
          return this.$message.success('添加成功')
        }
        this.$message.error('添加失败')
      })
    },
    // 编辑
    updateVisual() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        // 发起请求
        console.log(this.Id)
        const { data: res } = await this.$http.put(
          '/system/apis/visualization',
          this.editForm
        )
        if (res.code === 20000) {
          this.getVisualList()
          this.dialogEditVisible = false
          return this.$message.success('编辑成功')
        }
        this.$message.error('编辑失败')
      })
    },
    dialogEditOpen(
      Id,
      Pids,
      Mid,
      Fid,
      Name,
      Gender,
      Birth,
      Familytree,
      Img,
      Tel,
      Email,
      Resume
    ) {
      this.editForm.Id = String(Id)
      this.editForm.Pids = String(Pids)
      this.editForm.Mid = String(Mid)
      this.editForm.Fid = String(Fid)
      this.editForm.Name = String(Name)
      this.editForm.Gender = String(Gender)
      this.editForm.Birth = String(Birth)
      this.editForm.Familytree = String(Familytree)
      this.editForm.Img = String(Img)
      this.editForm.Tel = String(Tel)
      this.editForm.Email = String(Email)
      this.editForm.Resume = String(Resume)
      this.dialogEditVisible = true
    }
  }
}
</script>
<style>
</style>
